/**
 * @description 默认内置组件
 * @author FFFF
 */

import { loadAsyncComponent } from "../../componentManager.js";

export default [
    {
        groupName: "基础组件",
        isShow: true,
        list: [
            {
                name: "输入框",
                label: "输入框",
                icon: "EditOutlined",
                type: "input",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/input/inputOptions.vue")),
                groupName: "基础组件",
                isShow: true,
                event: [
                    {
                        name: "输入值",
                        type: "input",
                        desc: "输入值时触发onInput事件",
                    },
                    {
                        name: "值修改",
                        type: "change",
                        desc: "输入框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "输入框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "输入框获得焦点时触发focus事件",
                    },
                    {
                        name: "按下回车",
                        type: "enter",
                        desc: "输入框按下回车时触发keyup.enter事件",
                    },
                ]
            },
            {
                name: "文本域",
                label: "文本域",
                icon: "FormOutlined",
                type: "textarea",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    style: {},
                    autoSize: {
                        minRows: 2,
                        maxRows: 4
                    }
                },
                componentOptions: loadAsyncComponent(() => import("../../component/textarea/textareaOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "输入值",
                        type: "input",
                        desc: "输入值时触发onInput事件",
                    },
                    {
                        name: "值修改",
                        type: "change",
                        desc: "文本域值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "文本域失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "文本域获得焦点时触发focus事件",
                    },
                    {
                        name: "按下回车",
                        type: "enter",
                        desc: "文本域按下回车时触发keyup.enter事件",
                    },
                ]
            },
            {
                name: "数字输入框",
                label: "数字输入框",
                icon: "FieldNumberOutlined",
                type: "inputNumber",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/inputNumber/inputNumberOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "输入值",
                        type: "input",
                        desc: "输入值时触发onInput事件",
                    },
                    {
                        name: "值修改",
                        type: "change",
                        desc: "数字输入框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "数字输入框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "数字输入框获得焦点时触发focus事件",
                    },
                    {
                        name: "按下回车",
                        type: "enter",
                        desc: "数字输入框按下回车时触发keyup.enter事件",
                    },
                ]
            },
            {
                name: "密码输入框",
                label: "密码输入框",
                icon: "LockOutlined",
                type: "inputPassword",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/inputPassword/inputPasswordOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "输入值",
                        type: "input",
                        desc: "输入值时触发onInput事件",
                    },
                    {
                        name: "值修改",
                        type: "change",
                        desc: "密码输入框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "密码输入框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "密码输入框获得焦点时触发focus事件",
                    },
                    {
                        name: "按下回车",
                        type: "enter",
                        desc: "密码输入框按下回车时触发keyup.enter事件",
                    },
                ]
            },
            {
                name: "下拉框",
                label: "下拉框",
                icon: "DownSquareOutlined",
                type: "select",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    options: [
                        { label: "选项1", value: "1" },
                        { label: "选项2", value: "2" },
                    ],
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/select/selectOptions.vue")),
                optionName: "selectOptions",
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "下拉框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "下拉框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "下拉框获得焦点时触发focus事件",
                    },
                ]
            },
            {
                name: "单选框",
                label: "单选框",
                icon: "CheckCircleOutlined",
                type: "radio",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    radioType: "default",
                    buttonStyle: "outline",
                    options: [
                        { label: "选项1", value: "1" },
                        { label: "选项2", value: "2" },
                    ],
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/radio/radioOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "单选框值改变时触发change事件",
                    },
                ]
            },
            {
                name: "多选框",
                label: "多选框",
                icon: "CheckSquareOutlined",
                type: "checkbox",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    options: [
                        { label: "选项1", value: "1" },
                        { label: "选项2", value: "2" },
                    ],
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/checkbox/checkboxOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "多选框值改变时触发change事件",
                    },
                ]
            },
            {
                name: "卡片",
                label: "卡片",
                icon: "CreditCardOutlined",
                type: "card",
                layoutType: "flow",
                componentProps: {
                    showTitle: true,
                    bordered: true,
                    bodyStyle: {},
                    style: {}
                },
                component: loadAsyncComponent(() => import("../../component/card/dcCard.vue")),
                componentOptions: loadAsyncComponent(() => import("../../component/card/cardOptions.vue")),
                optionName: "cardOptions",
                groupName: "基础组件",
                children: [],
            },
            {
                name: "按钮",
                label: "按钮",
                icon: "BorderOutlined",
                type: "button",
                layoutType: "flow",
                componentProps: {
                    type: "default",
                    size: "middle",
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/button/buttonOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "点击",
                        type: "click",
                        desc: "点击按钮触发click事件",
                    },
                ]
            },
            {
                name: "标题",
                label: "标题",
                icon: "FontSizeOutlined",
                type: "title",
                layoutType: "flow",
                componentProps: {
                    type: "h1",
                    align: "left",
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/title/titleOptions.vue")),
                groupName: "基础组件",
            },
            {
                name: "日历",
                label: "日历",
                icon: "CalendarOutlined",
                type: "calendar",
                layoutType: "flow",
                componentProps: {
                    type: "h1",
                    align: "left",
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/calendar/calendarOptions.vue")),
                groupName: "基础组件",
            },
            {
                name: "颜色选择器",
                label: "颜色选择器",
                icon: "BgColorsOutlined",
                type: "colorPicker",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/colorPicker/colorPickerOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "颜色选择器值改变时触发change事件",
                    },
                ]
            },
            {
                name: "提示",
                label: "提示",
                icon: "WarningOutlined",
                type: "alert",
                layoutType: "flow",
                componentProps: {
                    type: "info",
                    showIcon: false,
                    closable: false,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/alert/alertOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "关闭时的回调",
                        type: "close",
                        desc: "关闭时触发的回调函数",
                    },
                ]
            },
            {
                name: "时间轴",
                label: "时间轴",
                icon: "DeploymentUnitOutlined",
                type: "timeline",
                layoutType: "flow",
                componentProps: {
                    mode: "left",
                    style: {},
                    options: [
                        { text: "1949年：中华人民共和国成立，标志着中国进入了一个新的历史时期" },
                        { text: "1950年：抗美援朝战争爆发，中国人民志愿军赴朝作战" },
                        { text: "1953年：中国第一个五年计划开始实施，奠定了国家工业化的基础" },
                        { text: "1956年：中国基本完成社会主义改造，进入社会主义初级阶段" },
                        { text: "1957年：中国成功试制第一颗原子弹" },
                    ],
                },
                componentOptions: loadAsyncComponent(() => import("../../component/timeline/timelineOptions.vue")),
                groupName: "基础组件",
            },
            {
                name: "分割线",
                label: "分割线",
                icon: "MinusOutlined",
                type: "divider",
                layoutType: "flow",
                componentProps: {
                    type: "horizontal",
                    dashed: false,
                    orientation: "left",
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/divider/dividerOptions.vue")),
                groupName: "基础组件",
            },
            {
                name: "时间选择器",
                label: "时间选择器",
                icon: "FieldTimeOutlined",
                type: "timePicker",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    allowClear: true,
                    placeholder: "请选择时间",
                    placeholder2: "结束时间",
                    showNow: true,
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/timePicker/timePickerOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "输入框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "输入框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "输入框获得焦点时触发focus事件",
                    },
                    {
                        name: "面板打开/关闭",
                        type: "openChange",
                        desc: "时间选择面板打开/关闭时的回调",
                    }
                ]
            },
            {
                name: "日期选择器",
                label: "日期选择器",
                icon: "CarryOutOutlined",
                type: "datePicker",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    placeholder: "选择日期",
                    placeholder2: "结束日期",
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/datePicker/datePickerOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "输入框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "输入框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "输入框获得焦点时触发focus事件",
                    },
                    {
                        name: "面板打开/关闭",
                        type: "openChange",
                        desc: "日期选择面板打开/关闭时的回调",
                    },
                    {
                        name: "日期面板变化",
                        type: "panelChange",
                        desc: "日期面板变化时的回调	",
                    }
                ]
            },
            {
                name: "评分",
                label: "评分",
                icon: "StarOutlined",
                type: "rate",
                layoutType: "flow",
                componentProps: {
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/rate/rateOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "获得焦点时触发focus事件",
                    },
                    {
                        name: "鼠标悬浮",
                        type: "hoverChange",
                        desc: "鼠标经过时数值变化的回调",
                    },
                ]
            },

            {
                name: "级联选择框",
                label: "级联选择框",
                icon: "DownSquareOutlined",
                type: "cascader",
                layoutType: "flow",
                componentProps: {
                    bordered: true,
                    options: [
                        { label: "选项1", value: "1" },
                        { label: "选项2", value: "2" },
                    ],
                    style: {}
                },
                componentOptions: loadAsyncComponent(() => import("../../component/cascader/cascaderOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "级联选择框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "级联选择框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "级联选择框获得焦点时触发focus事件",
                    },
                ]
            },
            {
                name: "滑动条",
                label: "滑动条",
                icon: "AlignLeftOutlined",
                type: "slider",
                layoutType: "flow",
                componentProps: {
                    style: {},
                },
                componentOptions: loadAsyncComponent(() => import("../../component/slider/sliderOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "值修改",
                        type: "change",
                        desc: "下拉框值改变时触发change事件",
                    },
                    {
                        name: "失去焦点",
                        type: "blur",
                        desc: "下拉框失去焦点时触发blur事件",
                    },
                    {
                        name: "获得焦点",
                        type: "focus",
                        desc: "下拉框获得焦点时触发focus事件",
                    },
                ]
            },
            {
                name: "表单容器",
                label: "表单容器",
                icon: "ProfileOutlined",
                type: "form",
                layoutType: "flow",
                componentProps: {
                    showTitle: true,

                    // 表单按钮配置
                    button: {
                        showButton: true,
                        buttonPlace: 'bottom',
                        buttonAlign: 'right',
                        submitButton: true,
                        submitButtonText: '提交',
                        resetButton: true,
                        resetButtonText: '重置'
                    },

                    bordered: true,
                    bodyStyle: {},
                    style: {
                        padding: "15px"
                    }
                },
                component: loadAsyncComponent(() => import("../../component/form/dcForm.vue")),
                componentOptions: loadAsyncComponent(() => import("../../component/form/dcFormOptions.vue")),
                groupName: "基础组件",
                children: [],
                event: [
                    {
                        name: "提交表单",
                        type: "submit",
                        desc: "提交表单后的回调",
                    },
                    {
                        name: "重置表单",
                        type: "reset",
                        desc: "重置表单后的回调",
                    },
                ]
            },
            {
                name: "超链接",
                label: "百度一下，你就知道",
                icon: "LinkOutlined",
                type: "link",
                layoutType: "flow",
                componentProps: {
                    style: {},
                    href: "https://www.baidu.com/",
                    target: '_blank',
                },
                componentOptions: loadAsyncComponent(() => import("../../component/link/linkOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "点击链接",
                        type: "click",
                        desc: "点击超链接时触发的回调",
                    },
                ]
            },
            {
                name: "图片",
                label: "图片",
                icon: "FileImageOutlined",
                type: "image",
                layoutType: "flow",
                componentProps: {
                    style: {},
                    preview: true,
                    src: "https://t12.baidu.com/it/u=2272949329,208470262&fm=30&app=106&f=JPEG?w=541&h=680&s=5CAB97554E237F1F509941790300D073",
                },
                componentOptions: loadAsyncComponent(() => import("../../component/image/imageOptions.vue")),
                groupName: "基础组件",
                event: [
                    {
                        name: "加载错误",
                        type: "error",
                        desc: "图片加载错误时的回调",
                    },
                ]
            },
            {
                name: "上传文件",
                label: "上传文件",
                icon: "CloudUploadOutlined",
                type: "upload",
                layoutType: "flow",
                componentProps: {
                    style: {},
                    action: "",
                    headers: {
                        authorization: 'authorization-text',
                    },
                    fileList: []
                },
                component: loadAsyncComponent(() => import("../../component/upload/dcUpload.vue")),
                componentOptions: loadAsyncComponent(() => import("../../component/upload/dcUploadOptions.vue")),
                optionName: "dcUploadOptions",
                groupName: "基础组件",
                event: [
                    {
                        name: "文件改变时",
                        type: "change",
                        desc: "文件发生改变时触发change事件",
                    },
                    {
                        name: "文件上传之前",
                        type: "beforeUpload",
                        desc: "文件上传之前触发beforeUpload事件，若返回 false 则停止上传",
                    },
                ]
            },
        ]
    },
    {
        groupName: "布局组件",
        list: [
            {
                name: "栅格布局",
                label: "栅格布局",
                icon: "TableOutlined",
                type: "gridLayout",
                componentProps: {
                    horizontalGutter: 5,
                    verticalGutter: 5,
                    style: {}
                },
                component: loadAsyncComponent(() => import("../../component/gridLayout/gridLayout.vue")),
                componentOptions: loadAsyncComponent(() => import("../../component/gridLayout/gridLayoutOptions.vue")),
                optionName: "gridLayoutOptions",
                groupName: "布局组件",
                // isShow: true,
                children: [
                    {
                        type: "col",
                        name: "列",
                        label: "列",
                        children: [],
                        componentProps: {
                            span: 12,
                            style: {}
                        },
                        component: loadAsyncComponent(() => import("../../component/gridLayout/col.vue")),
                        componentOptions: loadAsyncComponent(() => import("../../component/gridLayout/colOptions.vue")),
                    },
                    {
                        type: "col",
                        name: "列",
                        label: "列",
                        children: [],
                        componentProps: {
                            span: 12,
                            style: {}
                        },
                        component: loadAsyncComponent(() => import("../../component/gridLayout/col.vue")),
                        componentOptions: loadAsyncComponent(() => import("../../component/gridLayout/colOptions.vue")),
                    }
                ],
            },
        ]
    }
];

